<div class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog materialNeed-dialog" ng-init="init();"  style="background-color: #fafafa; ">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="dialog.title"></div>
        <div class="kmi-side-btn right" ng-click="dialog.back();">
            <img src="image/icons/clear.png"></img>
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-page" style="padding: 16px 16px 8px;flex: initial;background: white;">
        <div style="height:28px; display: flex;">
            <!-- 工單編號、設備工序、料站表 -->
            <div class="kmi-text-fields" style='flex: 1;'>
                <label class="label" ng-bind="'SMT17.material_need_dialog.wo_no' | translate"></label>
                <label ng-bind="dialog.info_list.work_no"></label>
            </div>
            <div class="kmi-text-fields" style='flex: 1;margin: 0 5px 0 0;'>
                <label class="label" ng-bind="'SMT17.material_need_dialog.eqp_wo_no' | translate"></label>
                <label ng-bind="dialog.info_list.machine_no + ' ( '+ dialog.info_list.seq +' ) '"></label>
            </div>
            <div class="kmi-text-fields" style='flex: 1;margin: 0 5px 0 0;'>
                <label class="label" ng-bind="'SMT17.material_need_dialog.lot_station_list' | translate"></label>
                <label ng-bind="dialog.info_list.feederlist_no +' ( ' + dialog.info_list.feederlist_ver + ' ) '"></label>
            </div>
        </div>
        <div style="border: 1px solid #ccc;border-radius:5px;margin: 10px 0;">
            <div style="display: flex;justify-content: center;"><!-- 需求清單 -->
                <div class="kmi-text-fields" style="flex: 1;display: flex; justify-content: center;font-weight: 600;font-size: 16px;">
                    <label class="label" ng-bind="'SMT17.material_need_dialog.need_list' | translate"></label>
                </div>
            </div>
            <div style="display: flex;">
                <!-- 設備站位、料站、物料編號 -->
                <div class="kmi-text-fields" style="flex: 1;">
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="dialog.chooseNeedList('1')" style="flex: 0 0 100px;height: 32px;">
                        <img ng-show="dialog.picklist_type != '1'" src="image/icons/check0.png">
                        <img ng-show="dialog.picklist_type == '1'" src="image/icons/check1.png">
                        {{'SMT17.material_need_dialog.eqp_pos_no' | translate}}
                    </button>
                </div>
                <div class="kmi-text-fields" style="flex: 1;margin-right: 10px;">
                    <label class="label" ng-bind="'SMT17.material_need_dialog.lot_station' | translate"></label>
                    <input class="value" style="flex: 1;margin-left: 5px;" ng-model="dialog.pos_station.slot_no" readonly="readonly" ng-click="dialog.material_open();" ng-disabled="dialog.picklist_type =='2'"></input>
                    <div class="tip search" ng-click="dialog.material_open();" ng-disabled="dialog.picklist_type =='2'">
                        <img src="image/icons/search.png"></img> 
                    </div>
                </div>
                <div class="kmi-text-fields" style="flex: 1;margin-right: 10px;">
                    <label class="label" ng-bind="'SMT17.material_need_dialog.material_no' | translate"></label>
                    <label ng-bind="dialog.pos_station.material_no"></label>
                </div>
            </div>
            <div style="display: flex;">
                <!-- 生產版數需求、成品數、確定 -->
                <div class="kmi-text-fields" style="flex: 1;">
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="dialog.chooseNeedList('2')" style="flex: 0 0 100px;height: 32px;">
                        <img ng-show="dialog.picklist_type != '2'" src="image/icons/check0.png">
                        <img ng-show="dialog.picklist_type == '2'" src="image/icons/check1.png">
                        {{'SMT17.material_need_dialog.produce_platte_need' | translate}}
                    </button>
                </div>
                <div class="kmi-text-fields" style="flex: 1;margin-right: 10px;">
                    <label class="label" ng-bind="'SMT17.material_need_dialog.product_num' | translate"></label>
                    <!-- <label ng-bind="dialog.produce_ver.qty" style="text-align: left;"></label> -->
                    <input mdl-calculater="dialog.product_qty" ng-disabled="dialog.picklist_type == '1'">
                </div>
                <div class="kmi-text-fields" style="flex: 1;"></div>
            </div>
        </div>
        <div style="display: flex;justify-content: flex-end;">
            <!-- 確定 -->
            <div class="kmi-button kmi-button-confrim" ng-click="dialog.confirm()" style="width:100px;margin-top:0px;">
                <label ng-bind="'SMT17.material_need_dialog.confirm' | translate"></label>
                <div class="kmi-can-click"></div>
            </div>
        </div>
        <div class="kmi-list material-list" style="flex:1 1 340px;padding:0px;">
            <div class="kmi-list__header">
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT17.material_need_dialog.eqp_lot_station' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT17.material_need_dialog.matrial_no' | translate"></div>
                <div class="kmi-list__column" style="flex: 1;" ng-bind="'SMT17.material_need_dialog.need_qty' | translate"></div>
            </div>
            <div class="kmi-list__row-content">
                <div class="kmi-list__row" ng-repeat="item in dialog.item_list track by $index">
                    <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.slot_no"></div>
                    <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.material_no"></div>
                    <div class="kmi-list__column column-border" style="flex: 1;" ng-bind="item.demand_qty"></div>
                </div>
            </div>
        </div>
        <div class="btn-panel">
            <div style="display:flex;justify-content: flex-end;">
                <div class="kmi-button kmi-button-confrim btn-confirm" ng-click="dialog.execute()" style="width:100px;">
                    <label ng-bind="'SMT17.material_need_dialog.execute' | translate"></label>
                    <div class="kmi-can-click"></div>
                </div>
            </div>
        </div>
    </div>
</div>
